<template>
  <div class="card">
    <section
      v-for="(data, index) in list"
      class="van-hairline--bottom card__list"
      :key="index"
      @click="click(data)"
    >
      <van-row class="card__row" v-for="(card, cIndex) in cardModel" :key="cIndex">
        <van-col :span="card.span1">
          <span class="card__list-label">{{ card.label1 }}</span>
          <span class="card__list-value">{{ data[card.modle1] }}</span>
        </van-col>
        <van-col v-if="card.label2" :span="card.span2">
          <span class="card__list-label">{{ card.label2 }}</span>
          <span class="card__list-value">{{ data[card.modle2] }}</span>
        </van-col>
      </van-row>
    </section>
  </div>
</template>

<script>
export default {
  name: 'qt-card',

  props: {
    toParth: String,

    list: {
      type: Array,
      default() {
        return [];
      },
    },

    cardModel: {
      type: Array,
      default() {
        return [];
      },
    },

    urlParams: {
      type: Array,
      default() {
        return [];
      },
    },
  },

  methods: {
    click(data) {
      if (this.toParth) {
        if (this.toParth === 'click-card') {
          this.$emit('click', data);
        } else {
          const name = this._.camelCase(this.toParth);
          const queryParams = {};

          if (this.urlParams && this.urlParams.length) {
            this.urlParams.forEach((item) => {
              queryParams[item] = data[item];
            });
          }

          this.$router.push({
            name,
            query: queryParams,
          });
        }
      }
    },
  },
};
</script>

<style lang="scss" scoped>
.card {
  font-size: 12px;
  .card__row {
    padding: 8px 0;
  }
  .card__list {
    margin-top: 1px;
    padding: 4px 10px;
    background: #fff;
    &-label {
      padding-right: 10px;
      color: #999;
    }
    &-value {
      color: #000;
    }
  }
}
</style>
